<template >
  <!-- 轮播图浮动 -->
  <el-carousel :interval="10000" height="500px" ref="carousel">
    <el-carousel-item v-for="item in imgs" :key="item">
      <img :src="item" alt="" />
    </el-carousel-item>
  </el-carousel>
  <!-- 浮动导航栏 -->
  <div :class="searchBarFixed === true ? 'topbar' : 'none'">
    <div class="content">
      <img src="@/assets/image/商标1.png" alt="" />
      <div>
        <el-input placeholder="请输入内容">
          <template #append>
            <el-button icon="el-icon-search"></el-button>
          </template>
        </el-input>
      </div>
      <el-badge class="item">
        <el-button size="medium" icon="el-icon-goods">购物车</el-button>
      </el-badge>
    </div>
  </div>
  <!-- 主体内容 -->
  <div class="home">
    <el-row class="product-menu">
      <el-col :span="4" class="sidebar">
        <ul>
          <li v-for="(item, index) in cap.capotion.slice(0, 2)" :key="index">
            <div>
              <i class="el-icon-edit"></i><a>{{ item.name }}</a>
              <div class="context">
                <a v-for="(i, index) in item.children" :key="index" @click="gosearch(i.name)">
                  <span v-if="index < 4">{{ i.name }}</span></a
                >
              </div>
              <div class="content">
                <div
                  class="list"
                  v-for="(i, index) in item.children"
                  :key="index"
                >
                  <div v-if="index < 8" class="lis">
                    <a @click="gosearch(i.name)">{{ i.name }}:</a>
                    <div class="shoplist">
                      <a v-for="(j, index) in i.children" :key="index" @click="gosearch(j.name)">{{
                        j.name
                      }}</a>
                    </div>
                    <hr />
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 四个单纯图片展示 -->
    <div class="imgshow">
      <a href="#" @click.prevent="toproduct('1344479910107258882')">
        <img style="width: 317px" src="@/assets/image/homePage/酸奶.jpg" alt="" />
      </a>
      <a href="#" @click.prevent="toproduct('1344481054690877442')">
        <img style="width: 317px" src="@/assets/image/homePage/红酒.jpg" alt="" />
      </a>
      <a href="#" @click.prevent="toproduct('1344466875770707970')">
        <img style="width: 317px" src="@/assets/image/homePage/兰蔻.jpg" alt="" />
      </a>
      <a href="#" @click.prevent="toproduct('1344477655324925953')">
        <img style="width: 317px" src="@/assets/image/homePage/三星.jpg" alt="" />
      </a>
    </div>

    <!-- 图片展示内容块 -->
    <el-row class="featured-product">
      <div class="featured-product-header">
        <h4>
          1F
          <strong
            style="
              color: #0066ff;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-image: -webkit-linear-gradient(left, #952dff, #0066ff);
            "
            >时尚美妆</strong
          >
        </h4>
      </div>
      <div class="featured-product-body">
        <el-row>
          <el-col :span="4">
            <img
              src="@/assets/image/homePage/美妆-兰蔻-竖.jpg"
              style="width: 225px; height: 500px"
              alt=""
            />
          </el-col>
          <el-col :span="8">
            <el-carousel height="500px">
              <el-carousel-item v-for="item in beautyImgs" :key="item">
                <a href="#" @click.prevent="toproduct(item.link)">
                  <img style="height: 100%;vertical-align: middle;" :src="item.img" alt="" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12" class="card">
            <el-card style="max-height: 253px !important;" shadow="hover" v-for="beauty in beautyProduct" :key="beauty.id">
              <a href="#" @click.prevent="toproduct(beauty.id)">
                <img style="width: 180px;height: auto;" :src="beauty.attributeValue0" alt="" />
                <div>
                <span style="font-size: 12px; color: red"
                >{{beauty.name}}</span
                >
                </div>
              </a>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <el-row class="featured-product">
      <div class="featured-product-header">
        <h4>
          2F
          <strong
            style="
              color: #ff8b00;
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-image: -webkit-linear-gradient(left, #ff4a7d, #ff8b00);
            "
            >数码通讯</strong
          >
        </h4>
      </div>
      <div class="featured-product-body">
        <el-row>
          <el-col :span="4">
            <img
              src="@/assets/image/homePage/数码-oppo-竖.jpg"
              style="width: 225px; height: 500px"
              alt=""
            />
          </el-col>
          <el-col :span="8">
            <el-carousel height="500px">
              <el-carousel-item v-for="item in communiImgs" :key="item">
                <a href="#" @click.prevent="toproduct(item.link)">
                  <img style="height: 100%;vertical-align: middle;" :src="item.img" alt="" />
                </a>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12" class="card">
            <el-card shadow="hover" v-for="communi in communiProduct" :key="communi.id">
              <a href="#" @click.prevent="toproduct(communi.id)">
                <img style="width:90%;height: auto;" :src="communi.attributeValue0" alt="" />
                <div>
                <span style="font-size: 12px; color: red"
                >{{communi.name}}</span
                >
                </div>
              </a>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- 有空做 -->
    <!-- <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>text</span>
            </div>
          </template>
          <div v-for="o in 4" :key="o" class="text item">
            {{ "列表内容 " + o }}
          </div>
        </el-card>
      </el-col>
    </el-row> -->
  </div>
</template>
<script>
import { classfication } from "@/api/product.js";
import {reactive, ref} from "@vue/reactivity";
import {category} from "@/api/product.js";
import router from "@/router";
import { useStore } from "vuex";

export default {
  name: "home",
  setup() {
    let beautyProduct = ref({})
    let communiProduct = ref({})
    let cap = reactive({
      capotion: [],
    });
    classfication().then((res) => {
      cap.capotion = res.data.data;
      console.log(cap.capotion);
    });
    let imgs = reactive(['https://shop.xiaoxiangai.com/upload/image/202101/732b9344-105f-447d-80d7-7554f2485798.jpg','https://shop.xiaoxiangai.com/upload/image/202101/9e31449e-43dc-436e-ab4b-3f0119078ca1.jpg'])
    let beautyImgs = reactive([
      {
        img:require("@/assets/image/homePage/美妆-兰蔻1-方.jpg"),
        link:'1344470063961841665'
      },
      {
        img:require("@/assets/image/homePage/美妆-兰蔻2-方.jpg"),
        link:'1344466875770707970'
      }
    ])
    let communiImgs = reactive([
      {
        img:require("@/assets/image/homePage/数码-oppo1.png"),
        link:'1344475064121663490'
      },
      {
        img:require("@/assets/image/homePage/数码-oppo2.png"),
        link:'1344476976980140034'
      },
      {
        img:require("@/assets/image/homePage/数码-三星1.png"),
        link:'1344477655324925953'
      },
      {
        img:require("@/assets/image/homePage/数码-三星2.png"),
        link:'1344478774461702145'
      }
    ])

    function cateoryBeauty(){
      category('时尚美妆').then((res) => {
        beautyProduct.value = res.data.data;
        // console.log("beautyProduct",beautyProduct)
      })
    }
    cateoryBeauty()
    function cateoryCommuni(){
      category('数码通讯').then((res) => {
        communiProduct.value = res.data.data;
        console.log("communiProduct",communiProduct)
      })
    }
    cateoryCommuni()
    function toproduct(id){
      sessionStorage.setItem('id',id)
      router.push({path:'/product'})
    }
    let store = useStore();
    // 查询跳转
    function gosearch(value){
      store.commit('setsearch',value)
      router.push({path:'/blank', query:{url:'/searchshop'}})
    }

    return {
      gosearch,
      imgs,
      beautyImgs,
      beautyProduct,
      communiImgs,
      communiProduct,
      cap,
      toproduct,
    };
  },
  data() {
    return {
      searchBarFixed: false,
    };
  },
  methods: {
    handleScroll() {
      let scrollTop = window.pageYOffset;
      if (scrollTop >= 500) {
        this.searchBarFixed = true;
      } else {
        this.searchBarFixed = false;
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
};
</script>
<style scoped>
/* 导航栏 */
a{
  text-decoration: none;
}
.none {
  display: none;
}
.topbar {
  width: 100%;
  display: block;
  position: fixed;
  top: 0;
  padding: 10px 0;
  background-color: #fff;
  z-index: 300;
}
.topbar .content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.topbar .content .el-input {
  width: 600px;
}

/* 主体样式 */
.home {
  width: 1350px;
  margin: 0 auto;
}
/* 分类导航栏 */
.product-menu {
  display: flex;
  position: relative;
  top: -500px;
  margin-bottom: -500px;
}
/* 分类导航栏左侧 */
.sidebar {
  height: 500px;
  background-color: rgb(0, 0, 0, 0.5);
}
.sidebar ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.sidebar ul li {
  color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 15px;
}
.sidebar ul li:hover {
  background-color: rgb(0, 0, 0, 0.75);
}
.sidebar ul li:hover .content {
  display: block;
}
.sidebar .context a {
  font-size: 12px;
  padding: 0 5px;
}
.sidebar .context a:hover {
  color: red;
  cursor: pointer;
}
.sidebar .context {
  margin: 10px 0;
}

/* 分类导航栏右侧 */
.sidebar .content {
  width: 700px;
  height: 500px;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 225px;
  box-shadow: 0px 0px 10px rgb(0, 0, 0, 10%);
  border: 1px solid #dddddd;
  background-color: #ffffff;
  display: none;
}
.sidebar .content .list {
  margin: 20px;
}
.sidebar .content .list .lis {
  margin: 10px;
  color: black;
}
.sidebar .content .list .lis a:hover {
  color: red;
  cursor: pointer;
}
.sidebar .content .list .shoplist {
  margin: 10px;
}
.sidebar .content .list .shoplist a {
  margin: 10px;
}
.sidebar .content .list .shoplist a:hover {
  color: red;
  cursor: pointer;
}
/* 四个单纯图片展示 */
.imgshow {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

/* 图片展示内容块 */
.featured-product {
  margin-bottom: 30px;
}
.featured-product-header {
  width: 100%;
}
.featured-product-body {
  width: 100%;
}
.featured-product-body .el-col {
  height: 500px;
}
.featured-product-body .card {
  display: flex;
  flex-wrap: wrap;
}
.featured-product-body .el-card {
  width: 223px;
}

.el-card__header {
  background-color: #ff9c6e;
}
</style>